<template>
  <!-- 预览简历 -->
  <view>
    <my-head title="预览" :right="false"></my-head>
    <view class="content">
      <view v-for="(list, key) in resumeList" :key="key">
        <!-- 当前是否有数据 -->
        <view v-if="list.id == 1">
          <view class="edit_data basic">
            <view class="user_data fl">
              <view class="right">
                <view style="flex: 1">
                  <view class="user_name"
                    ><text class="text">{{ list.data.Name }}</text>
                  </view>
                  <view class="userData fl">
                    {{ list.data.Age }}
                    {{
                      list.data.EducationLevelStr
                        ? " · " + list.data.EducationLevelStr
                        : ""
                    }}
                    {{
                      list.data.WorkYear == -1
                        ? " · 在校生"
                        : list.data.WorkYear == -2
                        ? " · 应届生"
                        : list.data.WorkYear
                        ? " · " + list.data.WorkYear + "年经验"
                        : ""
                    }}
                    {{
                      lsit6ttext(list.data.CurrentStatus)
                        ? " · " + lsit6ttext(list.data.CurrentStatus)
                        : ""
                    }}
                  </view>
                </view>
              </view>
              <view class="head_img">
                <image
                  style="width: 50px; height: 50px; border-radius: 50%"
                  :src="
                    list.data.Avatar
                      ? URL + list.data.Avatar
                      : '/static/recruit/index/nan.png '
                  "
                >
                </image>
                <image
                  class="sexImg"
                  :src="
                    list.data.Sex == 1
                      ? '/static/recruit/home/man.png'
                      : '/static/recruit/home/girl.png'
                  "
                  mode=""
                ></image>
              </view>
            </view>
          </view>
        </view>
        <!--求职意向-->
        <view v-if="list.id == 2">
          <view class="edit_data basic" v-if="list.data.length > 0">
            <view class="title"> 求职意向 </view>
            <view
              class="item_box"
              v-for="(item, key) in list.data"
              :key="key"
              style="margin-bottom: 10rpx"
            >
              <view class="fl-lr-c">
                <view class="fl-w" style="flex: 1">
                  <view class="p_data">{{ item.PositionName }}</view>
                  <view class="p_data">
                    {{
                      item.Negotiable
                        ? "面议"
                        : `${item.MinWage / 1000}k~ ${item.MaxWage / 1000}K`
                    }}
                  </view>
                  <view class="p_data">
                    {{
                      item.WorkType == 0
                        ? "全职"
                        : item.WorkType == 1
                        ? "兼职"
                        : "实习"
                    }}
                  </view>
                  <view class="p_data">{{ item.PcaAddress }}</view>
                </view>
              </view>
              <view class="fl-w">
                <view
                  class="job_type"
                  v-for="(itt, key) in item.IndustryList"
                  :key="key"
                >
                  {{ itt.Name }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <!--工作/实习经历-->
        <view v-if="list.id == 3">
          <view class="edit_data basic" v-if="list.data.length > 0">
            <view class="title fl-lr-c"> 工作/实习经历 </view>
            <view class="item_box" v-for="(item, key) in list.data" :key="key">
              <view class="fl-lr-c">
                <!-- 职位 -->
                <view class="position"
                  ><text> {{ item.CompanyName }}</text>
                </view>
                <view class="company-right fl-lr-c">
                  {{ item.StartDate | formatDateYM }}-{{
                    item.EndDate | formatDateYM
                  }}
                </view>
              </view>
              <view class="fl-t company">
                <view class="company-left">
                  {{ item.PositionName }} {{ " · " + item.Wage + "  /月" }}
                </view>
              </view>
              <view>
                <text class="introduce_text">
                  {{ item.WorkContent }}
                </text>
              </view>
              <view class="cont1" v-if="item.Emphasis !== '' && item.Emphasis">
                <view
                  class="cont1-li"
                  v-for="(ite, index) in item.Emphasis.split(',')"
                  :key="index"
                >
                  {{ ite }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <!--教育经历-->
        <view v-if="list.id == 4">
          <view class="edit_data basic" v-if="list.data.length > 0">
            <view class="title fl-lr-c"> 教育经历 </view>
            <view class="item_box" v-for="(item, key) in list.data" :key="key">
              <view class="fl-lr-c">
                <view class="School">{{ item.SchoolName }}</view>
                <view class="datatime" v-if="item.EduDegree > 2">
                  {{ item.StartDate | formatDateYM }}-{{
                    item.EndDate | formatDateYM
                  }}
                </view>
              </view>
              <view class="fl" v-if="item.Major || item.EduDegree">
                <view class="major">
                  {{ lsit2text(item.EduDegree) || "" }}
                </view>
                <view
                  v-if="item.Major"
                  class="major"
                  style="margin-left: 20rpx"
                >
                  {{ item.Major || "" }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <!--自我介绍-->
        <view v-if="list.id == 5">
          <view class="edit_data basic" v-if="list.data.GoodAt">
            <view class="title fl-lr-c">自我介绍</view>
            <view class="item_box">
              <text class="introduce_text">
                {{ list.data.GoodAt }}
              </text>
            </view>
            <view
              style="display: flex; flex-wrap: wrap; margin-top: 40rpx"
              :style="{
                'justify-content':
                  imgelist(list.data.GoodAtImages).length +
                    list.data.GoodAtVideo.length !=
                  2
                    ? 'space-between'
                    : 'flex-star',
              }"
            >
              <template v-for="(sddd, key) in imgelist(list.data.GoodAtImages)">
                <image
                  :key="key"
                  v-if="list.data.GoodAtImages"
                  @click="previewImage(URL + sddd)"
                  :src="URL + sddd"
                  style="
                    width: 200rpx;
                    height: 200rpx;
                    border-radius: 10rpx;
                    margin-left: 10rpx;
                  "
                ></image>
              </template>
              <template v-for="(item, key) in list.data.GoodAtVideo">
                <view
                  class="videoClass"
                  :key="'video' + key"
                  @click="requestFullScreen(item)"
                >
                  <view class="imageClass" v-if="!item.ImgPath"></view>
                  <view class="ImgPathBox" v-else>
                    <u--image
                      class="ImgPath"
                      width="200rpx"
                      height="200rpx"
                      :src="URL + item.ImgPath"
                    >
                    </u--image>
                    <u--image
                      class="top-img"
                      width="100rpx"
                      height="100rpx"
                      src="/static/static/images/video-file1.png"
                    />
                  </view>
                </view>
              </template>
            </view>
          </view>
        </view>

        <!--项目经历-->
        <view v-if="list.id == 6">
          <view v-if="list.data.length" class="edit_data basic">
            <view class="title fl-lr-c"> 项目经历 </view>
            <view class="item_box" v-for="(item, key) in list.data" :key="key">
              <view class="fl-lr-c">
                <view class="fl-t">
                  <view class="School">{{ item.ProjectName }} </view>
                </view>
                <view class="datatime">
                  {{ item.StartDate | formatDateYM }}-{{
                    item.EndDate | formatDateYM
                  }}
                </view>
              </view>
              <view class="jeuse">担任的角色： {{ item.RoleName }} </view>
              <text class="introduce_text" style="margin: 20rpx 0">
                {{ item.Content }}
              </text>
            </view>
          </view>
        </view>

        <!--培训经历-->
        <view v-if="list.id == 7">
          <view v-if="list.data.length" class="edit_data basic">
            <view class="title fl-lr-c"> 培训经历 </view>
            <view class="item_box" v-for="(item, key) in list.data" :key="key">
              <view class="fl-lr-c">
                <view class="School">{{ item.CompanyName }}</view>
                <view class="datatime">
                  {{ item.StartDate | formatDateYM }}-{{
                    item.EndDate | formatDateYM
                  }}
                </view>
              </view>
              <view class="major">培训课程：{{ item.CourseName }}</view>
            </view>
          </view>
        </view>

        <!--语言能力-->
        <view v-if="list.id == 8">
          <view v-if="list.data.length" class="edit_data basic">
            <view class="title" @click="addData(list, 1, list.id)">
              语言能力
            </view>
            <view class="item_box" v-for="(item, key) in list.data" :key="key">
              <view class="fl-lr-c">
                <view class="fl-t flex-width">
                  <view class="yuyan1">{{ item.Lang }}</view>
                  <view class="yuyan">听写能力{{ item.LsLevelStr }}</view>
                  <view class="yuyan">读写能力{{ item.RwLevelStr }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!--专业技能-->
        <view v-if="list.id == 9">
          <view v-if="list.data.length" class="edit_data basic">
            <view class="title"> 专业技能 </view>
            <view class="item_box" v-for="(item, key) in list.data" :key="key">
              <view class="fl-t flex-width">
                <view class="Title">{{ item.Title }}</view>
                <view class="Level">{{ item.Level }}</view>
                <view class="UseTime">使用时长： {{ item.UseTime }}个月</view>
              </view>
            </view>
          </view>
        </view>
        <!--证书-->
        <view v-if="list.id == 10">
          <view v-if="list.data.length" class="edit_data basic">
            <view class="title"> 证书 </view>
            <view class="item_box" v-for="(item, key) in list.data" :key="key">
              <view class="fl-t flex-width">
                <view class="Name">{{ item.Name }}</view>
                <view class="itemDate"
                  >获取时间：{{ item.Date | formatDateYM }}</view
                >
              </view>
            </view>
          </view>
        </view>
        <!--个人作品-->
        <view v-if="list.id == 11">
          <view v-if="list.data.length" class="edit_data">
            <view class="title"> 个人作品 </view>
            <view class="item_box" v-for="(item, key) in list.data" :key="key">
              <view class="fl-lr-c">
                <view style="flex: 1">
                  <view class="WorksName">{{ item.WorksName }} </view>
                  <view
                    v-show="item.WorksUrl"
                    style="font-size: 26rpx; color: #3476fe"
                  >
                    作品链接：{{ item.WorksUrl }}
                  </view>
                  <template v-for="(e, key) in JSON.parse(item.Attachment)">
                    <view
                      :key="key"
                      @click="previewFile(e)"
                      v-if="item.Attachment"
                      style="font-size: 26rpx; color: #3476fe"
                    >
                      作品附件：{{ e.name }}
                    </view></template
                  >
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import myHead from "@/pages/component/baseHead.vue";
export default {
  data() {
    return {
      URL: this.$config.domain.staticUrl,
      phone: uni.getStorageSync("homelist").UserInfo.PhoneNumber,
      list: {},
      resumeList: [
        {
          name: "基本信息",
          data: "",
          required: true,
          id: 1,
        },
        {
          name: "求职意向",
          data: "",
          required: true,
          id: 2,
        },
        {
          name: "自我介绍",
          data: "",
          required: false,
          id: 5,
        },
        {
          name: "工作/实习经历",
          data: "",
          required: true,
          id: 3,
        },
        {
          name: "教育经历",
          data: "",
          required: true,
          id: 4,
        },
        {
          name: "项目经历",
          data: "",
          required: false,
          id: 6,
        },
        {
          name: "培训经历",
          data: "",
          required: false,
          id: 7,
        },
        {
          name: "语言能力",
          data: "",
          required: false,
          id: 8,
        },
        {
          name: "专业技能",
          data: "",
          required: false,
          id: 9,
        },
        {
          name: "获得证书",
          data: "",
          required: false,
          id: 10,
        },
        {
          name: "个人作品",
          data: "",
          required: false,
          id: 11,
        },
      ],

      education: [],
      jobStateList: [],
      typeshow: true, //显示手机号，微信号
    };
  },
  onShow() {},
  created() {
    this.xialadata();
  },
  onLoad(option) {
    if (!option.typeshow) {
      this.typeshow = false;
    }
    this.getResums(option);
  },
  //子组件
  components: {
    myHead,
  },
  // 计算方法
  methods: {
    //预览图片
    previewImage(urls) {
      uni.previewImage({
        urls: [urls],
        longPressActions: {
          // itemList: ["发送给朋友", "保存图片", "收藏"],
          success: function (data) {
            // console.log(data.tapIndex);
          },
          fail: function (err) {},
        },
      });
    },
    requestFullScreen(item) {
      uni.navigateTo({
        url:
          "/pages/views/packageA/type-recruit/video/index?item=" +
          JSON.stringify(item.VideoPath),
      });
    },
    // 预览附件简历
    previewFile(item) {
      let ures = this.URL + item.url;
      uni.navigateTo({
        url: `/pages/views/packageB/type-jobhunting/previewFile?src=${ures}&title=${item.name}`,
      });
    },
    xialadata() {
      this.$http.dic.DataSelector(385800548573317).then((res) => {
        if (res.Success) {
          this.education = this.xialist(res.Result);
        }
      });
    },
    xialist(arr) {
      let drr = [];
      arr.forEach((res) => {
        let obj = {
          text: res.FullName,
          value: res.EnCode,
        };
        drr.push(obj);
      });
      return [drr];
    },
    lsit2text(items) {
      let arr = [];
      if (this.education.length > 0) {
        arr = this.education[0].filter((res) => {
          return items == res.value;
        });
      }
      if (arr.length == 0) {
        return "";
      } else {
        return arr[0].text || " ";
      }
    },
    lsit6ttext(items) {
      let arr = [];
      if (this.jobStateList.length > 0) {
        arr = this.jobStateList[0].filter((res) => {
          return items == res.value;
        });
      }
      if (arr.length == 0) {
        return "";
      } else {
        return arr[0].text || " ";
      }
    },
    imgelist(arr) {
      let letd;
      if (arr) {
        letd = arr.split(",");
      }
      return letd;
    },

    getResums(option) {
      this.$http.huirc
        .resumemy({
          id: option.ids,
        })
        .then((res) => {
          if (res.Success) {
            res = res.Result;
            this.list = res;
            //处理数据
            this.resumeList[0].data = res.BaseInfo; //基本信息
            this.resumeList[1].data = res.JobExpects; //求职意向
            this.resumeList[2].data = res.GoodAtInfo; //自我介绍
            this.resumeList[3].data = res.WorkExps; //工作/实习经
            this.resumeList[4].data = res.EducationExps; //教育经历
            this.resumeList[5].data = res.ProjectExps; //项目经历
            this.resumeList[6].data = res.TrainExp; //培训经历
            this.resumeList[7].data = res.LangSkills; //语言能力
            this.resumeList[8].data = res.ProSkills; //专业技能
            this.resumeList[9].data = res.Certificates; //证书
            this.resumeList[10].data = res.Portfolio; //个人作品
            let arr = this.resumeList[7].data;
            this.$http.dic
              .DataSelector(
                res.BaseInfo.CurrentRole == 0
                  ? "390788264784005"
                  : "423348254777477"
              )
              .then((res) => {
                if (res.Success) {
                  this.jobStateList = this.xialist(res.Result);
                }
              });
            for (let i = 0; i < arr.length; i++) {
              for (let j = i + 1; j < arr.length; j++) {
                if (arr[i].Lang == arr[j].Lang) {
                  arr.splice(j, 1);
                  j--;
                }
              }
            }
            this.resumeList[7].data = arr;
            this.resumeList[3].data.forEach((item) => {
              item.Emphasis = item.Emphasis;
            });
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
$size24: 48rpx;
$size19: 38rpx;
$size16: 32rpx;
$size15: 30rpx;
$size13: 26rpx;
$size12: 24rpx;
$bg-hui: #999999;
.videoClass {
  position: relative;
  .imageClass {
    margin-left: 10rpx;
    width: 200rpx;
    height: 200rpx;
    border-radius: 10rpx;
    position: relative;
    z-index: 9;
    background: url("/static/static/images/shipinfengmian.png") no-repeat center
      center;
    background-size: cover;
  }
  .ImgPathBox {
    margin-left: 10rpx;
    width: 200rpx;
    height: 200rpx;
    border-radius: 10rpx;
    box-sizing: border-box;
    overflow: hidden;
    .ImgPath {
      width: 200rpx;
      height: 200rpx;
    }
    .top-img {
      position: absolute;
      top: 25px;
      left: 30px;
      right: 0px;
      bottom: 0px;
      z-index: 999;
      opacity: 0.9;
    }
  }
}
.content {
  // width: 100%;
  // margin-top: 20rpx;
  background: #ffffff;

  .edit-box {
    padding: 30rpx;
    background-color: #ffff;
    box-sizing: border-box;
    margin-bottom: 10rpx;

    .title {
      font-size: $size15;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000000;
    }

    .add-box {
      width: 100%;
      height: 88rpx;
      background: #ffffff;
      border: 2rpx dashed #cdcbcb;
      border-radius: 20rpx;
      margin-top: 30rpx;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #666666;

      view {
        margin-left: 20rpx;
      }
    }
  }

  .edit_data {
    margin: 0rpx 40rpx;
    padding: 40rpx 0rpx 40rpx;
    box-sizing: border-box;
    background: #ffffff;

    .user_data {
      .head_img {
        width: 106rpx;
        height: 106rpx;
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: 50%;
        position: relative;
        top: 14rpx;
        z-index: 1;
        margin-right: 20rpx;
        flex-shrink: 0;

        .sexImg {
          position: absolute;
          z-index: 2;
          right: 0;
          top: 0;
          width: 24rpx;
          height: 24rpx;
        }

        .state {
          position: absolute;
          height: 42rpx;
          background: #ffffff;
          border: 1px solid #999999;
          border-radius: 4rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
          padding: 0 15rpx;
          left: 50%;
          white-space: nowrap;
          bottom: 0;
          transform: translate(-50%, 50%);
        }
      }

      .right {
        flex: 1;
      }

      .user_name {
        display: flex;
        align-items: center;
        font-size: 34rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #000000;
        .text {
          font-size: $size24;
        }
        .usernametext {
          margin-left: 30rpx;
          background: #ffffff;
          border: 1px solid #999999;
          border-radius: 8rpx;

          font-size: 24rpx;
          font-weight: 500;
          color: #999999;
          padding: 5rpx 15rpx;
        }
      }

      .userData {
        font-size: $size15;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        margin: 20rpx 0 0rpx;
        display: -webkit-box;
        /** 对象作为伸缩盒子模型显示 **/
        overflow: hidden;
        word-break: break-all;
        /* break-all(允许在单词内换行。) */
        text-overflow: ellipsis;
        /* 超出部分省略号 */
        -webkit-box-orient: vertical;
        /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-line-clamp: 1;
        /** 显示的行数 **/
      }

      .contactInformation {
        image {
          width: 28rpx;
          height: 28rpx;
        }

        text {
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #000000;
          padding-left: 10rpx;
        }
      }

      .contactInformation:nth-child(2) {
        margin-left: 20rpx;
        overflow: hidden;
        word-break: break-all;
        /* break-all(允许在单词内换行。) */
        text-overflow: ellipsis;
        /* 超出部分省略号 */
        display: -webkit-box;
        /** 对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1; //两行
      }
    }

    .title {
      font-size: $size19;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000000;

      .icon_add {
        width: 30rpx;
        height: 30rpx;
      }
    }

    .item_box {
      font-size: 28rpx;
      padding-top: 20rpx;
      .flex-width {
        margin-top: 10rpx;
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: $size16;
        color: #000000;
      }
      .major {
        margin-top: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: PingFang SC;
        font-weight: 500;
        color: $bg-hui;
      }
      .yuyan1 {
        width: 30%;
        font-weight: 500;
      }
      .yuyan {
        width: 40%;
        color: #000000;
        font-weight: 500;
      }
      .Title {
        margin-right: 40rpx;
        display: flex;
        width: 248rpx;
        white-space: nowrap;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .Level {
        width: 80rpx;
      }
      .UseTime {
        flex: 1;
      }
      .Name {
        width: 300rpx;
        white-space: nowrap;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .itemDate {
        width: 290rpx;
      }
      .WorksName {
        flex: 1;
        font-size: $size16;
        color: #000000;
        font-weight: 500;
        font-family: PingFang SC;
        margin-bottom: 20rpx;
      }
      .School {
        font-size: $size16;
        font-family: PingFang SC;
        font-weight: bold;
        color: #000000;
        margin-right: 30rpx;
      }
      .ProjectName {
        font-size: $size16;
        font-family: PingFang SC;
        font-weight: bold;
        color: #000000;
      }
      .datatime {
        font-size: $size12;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
      }

      .jeuse {
        font-size: $size13;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 600;
        color: $bg-hui;
        margin-top: 20rpx;
      }

      .introduce_text {
        font-size: $size13;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        // display: -webkit-box;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // word-wrap: break-word;
        // white-space: normal !important;
        // -webkit-line-clamp: 3;
        // -webkit-box-orient: vertical;
      }

      .position {
        font-size: 30rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
      }

      .p_data {
        font-size: $size16;
        font-family: PingFang SC;
        font-weight: 600;
        color: #000000;
        // padding-right: 50rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        // white-space: normal !important;
        white-space: nowrap;
        width: 25%;
      }

      .job_type {
        padding: 10rpx 20rpx;
        font-size: $size12;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
        background: #f7f7f7;
        border-radius: 4rpx;
        margin: 20rpx 20rpx 0 0;
      }
      .company-right {
        font-size: $size12 !important;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
      }

      .company {
        padding: 20rpx 0 30rpx;

        // view {
        // 	font-size: 26rpx;
        // 	font-family: PingFang SC;
        // 	font-weight: 500;
        // 	color: #000000;
        // 	margin-right: 20rpx;
        // }
        .company-left {
          font-size: 26rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: $bg-hui;
        }

        text {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
        }
      }

      .cont1 {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;

        .cont1-li {
          width: 130rpx;
          height: 50rpx;
          line-height: 50rpx;
          text-align: center;
          background: #f7f7f7;
          border-radius: 4rpx;
          opacity: 1;
          font-size: $size12;
          font-weight: 400;
          color: #666666;
          margin-right: 20rpx;
          margin-top: 20rpx;
        }
      }
    }
  }

  .basic {
    border-bottom: 2rpx solid #e7e7e8;
  }
  .iconRight {
    position: relative;
    top: 8rpx;
  }
  .iconRight2 {
    position: relative;
    top: 4rpx;
  }
}
</style>